<extend name="layout:layout" />
<block name="title">视频上传</block>
<block name="css_href">
    <link href="__PUBLIC__/Home/css/webuploader.css" rel="stylesheet">
</block>
<block name="content">
<!-- 上传页面 -->
<div id="uploader" class="wu-example container up_file_mian">
    <h3 class="text-center">视频上传</h3>
    <!--用来存放文件信息-->
    <div class="uploader-list">
        <table class="table">
        <thead>
            <tr>
                <th>文件名</th>
                <th>大小</th>
                <th>类型</th>
                <th>状态</th>
                <th>进度</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="thelist">
        </tbody>
        </table>
    </div>
    <div class="btns">
        <div id="picker" class="choose_file">选择文件</div>
        <button id="ctlBtn" class="btn btn-default start_upload">开始上传</button>
    </div>
</div>
</block>


<block name="javascript">
<script src="__PUBLIC__/Home/js/webuploader.min.js"></script>
<script>
 $(function(){
    var $list = $('#thelist');
    var uploader = WebUploader.create({

        // swf文件路径
        swf: '__PUBLIC__/Home/js/Uploader.swf',
        chunked: false,
        // 文件接收服务端。
        //server: 'http://webuploader.duapp.com/server/fileupload.php',
        server: "{:U('Uploader/uploads',['vid'=>$vid])}",
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        //限制每次只允许上传一个文件
	threads: 1,
       //是否允许在文件传输时提前把下一个文件准备好
	prepareNextFile: true,
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });
    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
        $list.append( '<tr id='+ file.id +'><td>'+file.name
                +'</td><td>'+(file.size/1048576).toFixed(2)
                +'MB</td><td>'+file.type
                +'</td><td class="statusText">'+file.statusText
                +'</td><td class="status">0%</td><td><button onclick="removeThisFile(this)" class="btn btn-default btn-xs"><i class="glyphicon glyphicon-trash"></i></button></td></tr>' );
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        $( '#'+file.id ).find('.status').html((percentage*100).toFixed(2) + '%');
    });
    //文件成功、失败处理
    uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).find('.statusText').text('已上传');
    });

    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('.statusText').text('上传出错');
    });
    // 上传
    $('#ctlBtn').click(function () {
        uploader.upload()
    });
    // 移除文件
    window.removeThisFile = function (elem) {
        var fildId = $(elem).parent().parent().attr('id');
        $('#'+fildId).remove();
        uploader.removeFile(fildId, true);
    }
 });
</script>
</block>
